<template>
	<view class="search-page">
		<u-picker mode="time" v-model="show"></u-picker>
		<u-picker mode="time" v-model="show" ></u-picker>
		
		<view class="flex search-line">
			<view class="addr-btn" @click="show=true">
				<u-icon name="map-fill" color="#000" size="28"></u-icon> 佛山
			</view>
			<u-search v-model="keyword" placeholder="搜索街道/楼盘名" placeholder-color="#eee" :show-action="false"></u-search>
		</view>
		<u-dropdown>
			<u-dropdown-item v-model="col1.value" :title="col1.label" :options="options1" @change="change1"></u-dropdown-item>
			<u-dropdown-item v-model="col2.value" :title="col2.label" :options="options2" @change="change2"></u-dropdown-item>
			<u-dropdown-item v-model="col3.value" :title="col3.label" :options="options3" @change="change3"></u-dropdown-item>
			<u-dropdown-item v-model="col4.value" :title="col4.label" :options="options4" @change="change4"></u-dropdown-item>
		</u-dropdown>
		
		


  <view class="main search-content" @scroll="handleScroll" >
   

      <view class="item search-item "  v-for="(item,index) in list " :key="index"  @click="onChoose(item)">
      <view class="bg-img"></view>
      <view class="bg-title-txt">测试</view>
      <view class="tags flex">
        <view class="tag">测试</view>
        <view class="tag">测试</view>
      </view>
      <view class="attrs flex">
        <view class="attr attr1">测试</view>
        <view class="attr attr2">测试</view>
        <view class="attr attr3">测试</view>
      </view>

    </view>
  </view> 
  
		<tabBar />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:true,
				keyword: '', 
				col1:{ label: '区域', value: 0 },
				col2:{ label: '状态', value: 0 },
				col3:{ label: '类型', value: 0 },
				col4:{ label: '排序', value: 0 },
				options1: [ { label: '区域', value: 0 }, ],
				options2: [ 
				  { label: '状态', value: 0 }, 
				  { label: '再租', value: 1 }, 
				  { label: '已租', value: 2 }, 
				  { label: '在售', value: 3 }, 
				  { label: '已售', value: 4 }, 
				],
				options3: [ 
				  { label: '类型', value: 0 }, 
				  { label: '高层', value: 1 }, 
				  { label: '公寓', value: 2 }, 
				  { label: '别墅', value: 3 }, 
				  { label: '单家', value: 4 }, 
				  { label: '写字楼', value: 5 }, 
				  { label: '商铺', value: 6}, 
				  { label: '土地', value: 7 }, 
				],
				options4: [ 
				  { label: '排序', value: 0 },
				  { label: '倒序', value: 1 },
				  { label: '升序', value: 2 },
			   ],
			   list:new Array(20).fill(0),
			   type :1,
			};
		},
		methods:{
			change1(index){ this.col1 = this.options1[index];},
			change2(index){ this.col2 = this.options2[index];},
			change3(index){ this.col3 = this.options3[index];},
			change4(index){ this.col4 = this.options4[index];},
			onChoose(item){
				this.toPage('/pages/search/detail')
			}
		}
		
	}
</script>

<style lang="scss">
	.search-page {
		font-size: 12px;

		.addr-btn {
			width: 100px;
			height: 30px;
			background: #FFD94B;
			color: #000;
			border: 1px solid #000;
			margin: 0 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50px;
		}

		.nut-searchbar {
			padding: 10px 0 6px 0;
		}

		.search-line {
			padding: 5px 10px;
			align-items: center;
		}

		/* 列表样式相关 */

		.col {
			display: flex;
			flex-direction: column;
			height: 100vh;
		}

		.item {
			margin: 10px 0;
		}

		.bg-img {
			height: 200px;
			background: url(https://unsplash.it/100/100?random) center center / 100% 100%;
		}

		.bg-title-txt {
			font-size: 18px;
			font-weight: 600;
			margin: 10px 0;
		}

		.tags {
			margin: 5px 0;
		}

		.tag {
			background: #FBD100;
			padding: 2px 10px;
			font-size: 12px;
			margin: 0 10px 5px 0;
			border-radius: 50px;
		}

		.attrs {
			margin: 5px 0;
		}

		.attr {
			flex: 1;
			text-align: center;
			font-size: 12px;
		}

		.attr1 {
			color: #FFF100;
			text-align: left;
		}

		.attr2 {
		 color: #ccc;
		}

		.list {
			margin-top: 10px;
			flex: 1;
			overflow: auto;
		}

		.search-item {
			margin: 0 10px;
		}
	}
</style>
